<template>
	<view class="container">
		<view class="content">
			<view class="xjs-ml-32 xjs-mr-32">
				<view class="xjs-size-32 xjs-weight-bold xjs-pt-40 linehei1">拒绝原因</view>
				<view class="tips_text linehei1">告诉TA不通过成为陪宠师的原因，300字以内。</view>
				<textarea v-model="dataGet.remark" maxlength="300" :adjust-position="true" :show-confirm-bar="false" class="textarea_box" placeholder="请输入拒绝原因"></textarea>
				<view class="from_card">
					<view class="from_up_img">
						<template v-if="imgList">
							<view class="img_list" v-for="(imgItem,imgIndex) in imgList" :key="imgIndex">
								<image @tap="delImg(imgIndex)" class="del_icon" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-100.png" mode=""></image>
								<image @tap="preview(imgItem)" class="img_list_imgs" :src="imgItem" mode=""></image>
							</view>
						</template>
				
						<view class="add_up_img" v-if="imgList.length < 9" @tap="upImg">
							<image class="" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-97.png" mode=""></image>
						</view>
				
					</view>
					<view class="from_title_tips">上传图片，最多9张。</view>
				</view>
			</view>
		</view>
		<view @tap="submitBtn" class="submit_btn">提交</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onShow , onLoad } from '@dcloudio/uni-app'
	import config from '@/config/index'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo, access_token } = useUserStoreToRefs()
	import api from '@/api'
	const dataGet = reactive<{
		id:number | string
		remark:''
	}>({
		id:'',
		remark:''
	})
	const imgList = ref([])
	//提交
	const submitBtn = async () => {
		if(!dataGet.remark){
			uni.showToast({
				title: '请输入拒绝原因',
				icon: 'none'
			})
			return
		}
		const res : any = await api({
			method: 'post',
			url: `/mall/studio/apply-studio-record/InitialAuditRefuse`,
			data:{
				remarkPic:imgList.value.toString(),
				remark:dataGet.remark,
				recordId:dataGet.id
			}
		})
		if(res.code=='0'){
			dataGet.remark = ''
			imgList.value = []
			uni.showToast({
				title: '拒绝成功',
				icon: 'none'
			})
			setTimeout(()=>{
				uni.navigateBack()
			},1000)
			
		}else{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	const upImg = () => {
		let countNum = 9
		if (imgList.value) {
			countNum = 9 - imgList.value.length
		}
		uni.chooseImage({
			count: countNum,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["album"], //从相册选择
			success: function (res) {
				console.log(res.tempFilePaths)
				//imgList.value = imgList.value.concat(res.tempFilePaths)
				uploadImage(res.tempFilePaths)
			}
		})
	}
	const uploadImage = (filePath) => {
		console.log(filePath)
		filePath.forEach((item, index) => {
			uni.uploadFile({
				url: config.api + '/api/mall/studio/apply-studio-progress/uploadPic',
				filePath: item,
				name: 'file',
				method: 'post',
				header: {
					'Authorization': access_token.value ? 'Bearer ' + access_token.value :
						'Basic bWFsbC1hcHA6bWFsbC1hcHA=',
					'x-flow-id': new Date().getTime(),
					"x-client-id": ""
				},
				success: async (uploadFileRes) => {
					console.log(JSON.parse((uploadFileRes.data)).data)
					imgList.value = imgList.value.concat(JSON.parse((uploadFileRes.data)).data)
					//await setAvatarApi(JSON.parse((uploadFileRes.data)).data)
				},
				fail: (error) => {
					console.error(error);
				}
			})
		})
	}
	const preview = (imgUrl) => {
		let images = [imgUrl]
		console.log(images, 'images')
		uni.previewImage({
			current: 0,
			urls: images,
		});
	}
	const delImg = (delIndex) => {
		console.log(delIndex)
		imgList.value.splice(delIndex,1)
	}
	onLoad((e)=>{
		dataGet.id = e.id
		console.log(dataGet.id)
	})
	onShow(() => {
		
	})
</script>

<style lang="scss" scoped>
	.linehei1{
		line-height: 1;
	}
	.content{
		width: 686rpx;
		margin: 32rpx auto;
		background: #FFFFFF;
		border-radius: 24rpx;
		.tips_text{
			color: #7C807F;
			font-size: 26rpx;
			margin-top: 16rpx;
			margin-bottom: 32rpx;
		}
		.textarea_box{
			display: block;
			width: 558rpx;
			height: 622rpx;
			line-height: 1.5;
			background: #F9F6F6;
			border-radius: 16rpx ;
			font-size: 30rpx;
			padding: 32rpx;
		}
		.image_list{
			margin-top: 40rpx;
		}
		.image_list image{
			width: 160rpx;
			height: 213rpx;
			background: #F9F6F6;
			border-radius: 16rpx ;
		}
		.img_tip{
			color: #7C807F;
			padding-bottom: 40rpx;
			padding-top: 24rpx;
			font-size: 24rpx;
		}
		
	}
	.submit_btn{
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		border-radius: 62rpx;
		margin: 24rpx auto;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
	}
	.from_card {
		display: none;
		margin-top: 24rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		line-height: 1;
	
		.from_title {
	
			.from_title_name {
				margin-bottom: 16rpx;
				font-size: 36rpx;
				color: #1B2120;
				font-weight: bold;
			}
		}
		.from_title_tips {
			font-size: 24rpx;
			color: #7C807F;
			padding: 24rpx 0 40rpx;
			line-height: 1;
		}
		.from_item {
			margin-top: 64rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			line-height: 1;
	
			.from_item_label {
				width: 138rpx;
				color: #1B2120;
				font-weight: bold;
			}
	
			.from_item_value {
				padding-bottom: 24rpx;
				width: 460rpx;
				border-bottom: 2rpx solid #E4E6E6;
				color: #CACCCC;
				display: flex;
				justify-content: space-between;
	
				.from_item_value_right {
					color: #1B2120;
				}
	
				input {
					width: 90%;
					margin-top: -14rpx;
					line-height: 1;
					color: #1B2120;
				}
			}
	
			.from_item_textarea {
	
				line-height: 1.4;
				margin-top: -16rpx;
				border-radius: 16rpx;
				background-color: #F9F6F6;
				box-sizing: border-box;
				padding: 32rpx;
				color: #CACCCC;
				width: 622rpx;
				word-break: break-all;
			}
	
			.from_item_text_act {
				color: #1B2120;
			}
	
	
	
		}
	
	
		.from_up_img {
			display: flex;
			flex-wrap: wrap;
	
			.img_list {
				margin: 16rpx 16rpx 0 0;
				width: 160rpx;
				height: 213rpx;
				position: relative;
	
				.del_icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}
	
				.img_list_imgs {
					width: 160rpx;
					height: 213rpx;
					border-radius: 4rpx;
				}
			}
	
			.add_up_img {
				margin: 16rpx 16rpx 0 0;
				width: 160rpx;
				height: 213rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #F9F6F6;
	
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>